<template>
  <view class="page-container">
    <!-- 输入值区域 -->
    <view class="input-row">
      <text class="label">输入值:</text>
      <input 
        v-model="title" 
        class="input input-red" 
        placeholder="请输入要传递的值" 
        placeholder-style="color: #000000;"
      />
    </view>

    <!-- 回传值区域 -->
    <view class="input-row">
      <text class="label">回传值:</text>
      <input 
        :value="callBackValue" 
        class="input input-yellow" 
        readonly
      />
    </view>

    <!-- 子组件区域 -->
    <view class="component-list">
      <comA :intent="title" class="component-card"></comA>
      <comB @callBackFun="callBack" class="component-card"></comB>
    </view>
  </view>
</template>

<script>
import comA from '../../components/ComA.vue'
import comB from '../../components/ComB.vue'
export default {
  components: { comA, comB },
  data() {
    return { title: '', callBackValue: '' };
  },
  methods: {
    callBack(msg) { this.callBackValue = msg; }
  }
}
</script>

<style scoped>
.page-container {
  padding: 40rpx 30rpx;
}
.input-row {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}
.label {
  width: 120rpx;
  font-size: 28rpx;
  color: #333;
}
.input {
  flex: 1;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}
.input-red {
  color: red;
}
.input-yellow {
  background: #333;
  color: yellow;
}
.component-list {
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}
.component-card {
  border: 1px solid #eee;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style>